cascading style sheets guide

Why do we need Style Sheets?

The major idea underlying Cascading Style Sheets is

web sites should separate content from appearance

As a web developer, this means that the information in your web site should go into your HTML files, but HTML files should not contain information about how that information is displayed. And you've probably guessed by now that information about how the pages should appear goes into style sheet files.

You might wonder what advantages this conveys. Why go to all of this trouble? Just a couple of advantages might give you an idea about why this approach has long been considered beneficial.

The traditional HTML approach is to "hardcode" all of the appearance information about a page. Want all your headings in courier, and at different point sizes to the sizes built into browsers. Then, for every heading, in every page, set the font size and face properties. Got 100 pages? That is a lot of editing, and a lot of re-editing if you decide to spruce up your pages later. And with all of that editing their is plenty of possibility for introducing errors.

With Cascading Style Sheets, you can decide how headings appear, and enter that information once. Every heading in every page that is linked to this style sheet now has that appearance. Want to make every heading of level 3 a fraction smaller? Edit the style sheet, and every such heading now has the altered appearance. How many hours work (and potential errors) have you just saved?

Another major advantage involves the management of large, sophisticated sites. With cascading style sheets, whole organizations can share a small number of style sheets, ensuring consistency across the site with no need for constant updating and editing to accommodate changes. For a discussion of this advantage in detail, see our Managing Style at Large Sites, in the section on cascading.

There are plenty of other advantages, too. Many of the pages in the resources section of our web site discuss these, so we won't waste too much time here. If you still aren't convinced, spend a little time looking at some of those pages.

In this part

In this part we asked why bother with style sheets? The first major idea we have come across is that the content and appearance of web pages should be separated. Appearance goes into cascading style sheet (.css) files, while content goes into HTML files. And of course, those HTML files should avoid tags like bold, italic, as well as bgcolor attributes, and other appearance code.

Before we get into the practicalities of how style sheets work, we are going to take a quick look at two important ideas that are often overlooked, Cascading and Inheritance. With these key ideas under our belts, we will be ready to tackle the creation and editing of style sheets.

cascading style sheets guide

Why do we need Style Sheets?

In this part

Next